<!DOCTYPE html>
<html lang="en">

<head>
    <title>蓝色登录界面HTML代码</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--图标样式-->
    <link rel="stylesheet" type="text/css" href="./assets/">

    <!--布局框架-->
    <link rel="stylesheet" type="text/css" href="./assets/css/util.css">

    <!--主要样式-->
    <link rel="stylesheet" type="text/css" href="./assets/css/main.css">

    <!--核心插件样式-->
    <link rel="stylesheet" href="./assets/css/notiflix.css">

    <!-- jquery  -->
    <script src="./assets/js/jquery.min.js"></script>

    <!-- axios  -->
    <script src="./assets/js/axios.min.js"></script>

    <!-- 提示插件 -->
    <script src="./assets/js/notiflix-1.3.0.min.js"></script>

    <!-- 请求接口封装文件 -->
    <script src="./util/request.js"></script>
</head>

<body>

    <div class="limiter">
        <div class="container-login100" style="background-image: url('./assets/images/img-01.jpg');">
            <div class="wrap-login100 p-t-190 p-b-30">
                <form id="form" class="login100-form validate-form" method="post">
                    <div class="login100-form-avatar">
                        <img src="./assets/images/avatar-01.jpg" alt="AVATAR">
                    </div>

                    <span class="login100-form-title p-t-20 p-b-45">Hello</span>

                    <div class="wrap-input100 validate-input m-b-10" data-validate="请输入手机号码">
                        <input class="input100" required type="text" name="mobile" placeholder="手机号码"
                            autocomplete="off">
                        <span class="focus-input100"></span>
                        <span class="symbol-input100">
                            <i class="fa fa-user"></i>
                        </span>
                    </div>

                    <div class="wrap-input100 validate-input m-b-10" data-validate="请输入密码">
                        <input class="input100" type="password" required name="password" placeholder="密码">
                        <span class="focus-input100"></span>
                        <span class="symbol-input100">
                            <i class="fa fa-lock"></i>
                        </span>
                    </div>

                    <div class="container-login100-form-btn p-t-10">
                        <button class="login100-form-btn" type="submit">登 录</button>
                    </div>
<!-- 
                    <div class="text-center w-full p-t-25 p-b-230">
                        <a href="index.html#" class="txt1">忘记密码？</a>
                    </div> -->

                    <div class="text-center w-full">
                        <a class="txt1" href="register.html">
                            立即注册
                            <i class="fa fa-long-arrow-right"></i>
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>

</html>

<script>
    Notiflix.Notify.Init();
    $("#form").submit(async function () {
        event.preventDefault();
        // 处理表单的数据
        var x = $('#form').serializeArray();
        var data = {};
        $.each(x, function (i, field) {
            data[field.name] = field.value;
        });
        // 校验手机号码
        if (data.mobile) {
            var reg = /^((1[3-8][0-9])+\d{8})$/
            if (!reg.test(data.mobile)) {
                Notiflix.Notify.Failure("手机格式不正确");
            }
        }
        let res = await POST({
            url: '/shop/business/login',
            params: data
        })
        if (res.code == 1) {
            Notiflix.Notify.Success(res.msg);
            // setTimeout(() => {
            //     location.href = "/user"
            // }, 1000)
        } else {
            Notiflix.Notify.Failure(res.msg);
        }
    })
</script>